﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="/resources/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/resources/bootstrap-order/css/bootstrap-order.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/resources/bootstrap-order/support/html5shiv.min.js"></script>
    <script src="/resources/bootstrap-order/support/respond.min.js"></script>
    <![endif]-->



</head>
<body>








<div class="container">


    <div class="panel panel-default">
        <div class="panel-heading">
            Table List
            <span class="glyphicon glyphicon-chevron-up pull-right panel-toggle"></span>
        </div>
        <div class="panel-body">
            <form class="form-horizontal form-inline">
                <div class="row normal" id="searchContainer">
                    <div class="form-group">
                        <label for="inputFirstName" class="col-sm-4 control-label">First Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputLastName" class="col-sm-4 control-label">Last Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" style="margin-left: 10px;">Search</button>
                    <div class="clearfix"><br></div>
                </div>

                <div class="row normal">
                    <div>
                        <ul class="pull-left list-inline">
                            <li><button type="button" class="btn btn-default searchToggle" data-target="#searchContainer">Simple</button></li>
                        </ul>
                    </div>
                    <div>
                        <ul class="pull-right list-inline">
                            <li><button type="button" class="btn btn-primary" onclick="showSort()">Sort</button></li>
                            <li><button type="button" class="btn btn-primary" onclick="getData()">Get Data</button></li>
                        </ul>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover" data-row="10">
                        <thead>
                        <tr class="row">
                          
                            <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3" field="firstName">First Name</th>
                            <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3" field="lastName">Last Name</th>
                            <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3" field="username">Username</th>
                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-2" field="OPERATE">Operate</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                           
                            <td>zhang</td>
                            <td>san</td>
<td>王五</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info" onclick="addSort({id: 3, name: '王五', num: 1})">Add Sort</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                         
                            <td>li</td>
                            <td>si</td>
<td>李四</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info" onclick="addSort({id: 2, name: '李四', num:2})">Add Sort</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                           
                            <td>wang</td>
                            <td>wu</td>
<td>张三</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info" onclick="addSort({id: 1, name: '张三', num: 3})">Add Sort</button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="row normal ext-page">
                        <input type="hidden" name="pageNo" value="1" data-page="pageNo">
                        <input type="hidden" name="pageSize" value="10" data-page="pageSize">
                        <div class="pull-left">
                            <p class="help-block">
                                每页显示<span class="pageSize">10</span>条   总共<span class="totalCount">XX</span>条   当前<span class="pageNo">x</span>/<span class="pageCount">y</span>页
                            </p>
                        </div>
                        <div class="pull-right">
                            <div data-page="pageGroup">
                                <button class="btn btn-default disabled firstPage" type="button">First</button>
                                <div class="btn-group">
                                    <button class="btn btn-default prevPage" type="button">Prev</button>
                                    <button class="btn btn-default nextPage" type="button">Next</button>
                                </div>
                                <button class="btn btn-default lastPage" type="button">Last</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>

<script src="/resources/assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/resources/assets/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/resources/bootstrap-order/js/bootstrap-order.min.js"></script>
<script>
    var order;
    $(function(){
        index = new BootstrapOrder();

    });

    function showSort() {
        index.toggleShow();
    }

    function addSort(item) {
        index.addItem(item);
    }

    function getData(){
        var data = index.getData();
        alert(JSON.stringify(data));
    }
</script>
</body>
</html>